<article class="component" id="cards">
  <h2 class="component-title">卡片（Cards）</h2>
  <p class="component-description">伴随着列表视图，卡片是一种很好的方法来控制和组织你的信息。卡片含有独特的相关数据，例如，照片，文字和所有关于一个主题的链接。卡片通常是更复杂的和详细的信息的一个切入点。</p>

  <div class="component-example component-example-fullbleed">
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">卡片</h1>
</header>
<div class="content">
  <div class="content-block-title">简单卡片</div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">卡头</div>
    <div class="card-content">
      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
    </div>
    <div class="card-footer">卡脚</div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
    </div>
  </div>
  <div class="content-block-title">风格卡片</div>
  <div class="card demo-card-header-pic">
    <div valign="bottom" class="card-header color-white no-border no-padding">
      <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
    </div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">发表于 2015/01/15</p>
        <p>此处是内容...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">赞</a>
      <a href="#" class="link">更多</a>
    </div>
  </div>
  <div class="content-block-title">Facebook卡片</div>
  <div class="card facebook-card">
    <div class="card-header no-border">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">夜萧</div>
      <div class="facebook-date">星期一 3:47pm</div>
    </div>
    <div class="card-content"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%"></div>
    <div class="card-footer no-border">
      <a href="#" class="link">赞</a>
      <a href="#" class="link">评论</a>
      <a href="#" class="link">分享</a>
    </div>
  </div>
  <div class="content-block-title">列表视图卡片</div>
  <div class="card">
    <div class="card-content">
      <div class="list-block">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">链接 1</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">新的公布:</div>
    <div class="card-content">
      <div class="list-block media-list">
        <ul>
          <li class="item-content">
            <div class="item-media">
              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">标题</div>
              </div>
              <div class="item-subtitle">子标题</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="card-footer">
      <span>2015/01/15</span>
      <span>5 评论</span>
    </div>
  </div>            
</div>
{% endhighlight %}

</article>

<article class="component active">
  <h3 class="component-title">卡片列表视图</h3>
  <p class="component-description">可以用卡片在<a href="#list">列表视图</a>中有用的元素，在这种情况下就可以使用搜索栏，虚拟列表和列表视图功能卡片。在这种情况下我们需要添加额外的卡片列表类<code>&lt;div class="list-block"&gt;</code></p>

  <div class="component-example component-example-fullbleed">
  </div>

  {% highlight html %}
  <header class="bar bar-nav">
    <h1 class="title">列表卡片</h1>
  </header>
  <div class="content">
    <div class="list-block cards-list">
      <ul>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
      </ul>
    </div>
  </div>
  {% endhighlight %}

</article>
